<template>
  <div>
    <slot name="tableForm" v-if="data.isForm">

    </slot>
    <slot name="toolBar">
      <div class="toolBar" style="padding: 5px 0px ;">
        <div class="leftBar">
          <slot name="leftBar"></slot>
        </div>
        <div class="rightBar" v-if="props.toolBar.right">
          <slot name="rightBar">
            <tiny-button-group>
              <tiny-button :icon="TinyIconSearch"circle @click="data.isForm = !data.isForm"> </tiny-button>
              <tiny-button :icon="TinyIconEdit" circle> </tiny-button>
              <tiny-button :icon="TinyIconYes" circle> </tiny-button>
            </tiny-button-group>
          </slot>
        </div>
      </div>
    </slot>
     <!-- 树状表格 -->
     <tiny-grid  ref="voTable" @edit-actived="editActive" @edit-closed="editClosed" v-if="props.isTree"
      :data="tableData.data" :align="props.align" :row-key="props.rowKey" :drop-config="config.dropConfig"
      :edit-config="props.editConfig" :auto-resize="props.autoResize" :border="props.border"
      :column-min-width="props.columnMinWidth" :column-width="props.columnWidth" :columns="props.columns"
      :edit-rules="props.editRules" :expand-config="props.expandConfig" :fit="props.fit"
      :header-align="props.headerAlign" :header-cell-class-name="props.headerCellClassName"
      :header-row-class-name="props.headerRowClassName" :height="props.height" :highlight-cell="props.highlightCell"
      :highlight-current-column="props.highlightCurrentColumn" :highlight-current-row="props.highlightCurrentRow"
      :highlight-hover-column="props.highlightHoverColumn" :is-async-column="props.isAsyncColumn"
      :is-before-page-change="props.isBeforePageChange" :loading="props.loading"
      :loading-component="props.loadingComponent" :max-height="props.maxHeight" :min-height="props.minHeight"
      :mouse-config="props.mouseConfig" :optimization="props.optimization" :radio-config="props.radioConfig"
      :remote-filter="props.remoteFilter" :remote-sort="props.remoteSort" :resizable="props.resizable"
      :row-class-name="props.rowClassName" :row-group="props.rowGroup" :row-id="props.rowId" :row-span="props.rowSpan"
      :save-data="props.saveData" :select-config="props.selectConfig" :seq-serial="props.seqSerial"
      :show-footer="props.showFooter" :show-header="props.showHeader" :show-header-overflow="props.showHeaderOverflow"
      :show-overflow="props.showOverflow" :show-save-msg="props.showSaveMsg" :size="props.size"
      :sort-config="props.sortConfig" :sort-method="props.sortMethod" :sortable="props.sortable"
      :start-index="props.startIndex" :stripe="props.stripe" :sync-resize="props.syncResize" :toolbar="props.toolbar"
      :tree-config="{ children: 'children',renderIcon }" :tooltip-config="props.tooltipConfig"
      :valid-config="props.validConfig">
      <template v-for="(item, num) in props.data.cols || props.cols">
        <template v-if="item.type">
          <!-- 内置列 序号 以及多选框 单选框 等 -->
          <tiny-grid-column :type="item.type" :width="item.width || '60'" :title="item.title"></tiny-grid-column>
        </template>
        <template v-else-if="item.slot">
          <!-- 插槽列 -->
          <tiny-grid-column :field="item.key || ''" show-overflow:tooltip :title="item.title" show-overflow
            :width="item.width || 'auto'" :align="item.align">
            <!-- 右侧操作  额外插槽 返回行数据-->
            <template #default="{ row }">
              <slot :name="item.slot" :row="row"></slot>
            </template>
          </tiny-grid-column>
        </template>
        <template v-else-if="item.edit">
          <template v-if="item.edit.editor">
            <!-- 可编辑异步渲染 -->
            <tiny-grid-column :field="item.key" :title="item.title" :align="item.align || vTable.column.align"
              :filter="item.filter || vTable.column.filter" :fixed="item.fixed || vTable.column.fixed"
              :footer-align="item.footerAlign || vTable.column.footerAlign"
              :footer-class-name="item.footerClassName || vTable.column.footerClassName"
              :header-align="item.headerAlign || vTable.column.headerAlign"
              :header-className="item.headerClassName || vTable.column.headerClassName"
              :min-width="item.minWidth || vTable.column.minWidth" :multi="item.multi || vTable.column.multi"
              :params="item.params || vTable.column.params" :required="item.required || vTable.column.required"
              :resizable="item.resizable || vTable.column.resizable" :rules="item.rules || vTable.column.rules"
              :show-header-overflow="item.showHeaderOverflow || vTable.column.showHeaderOverflow"
              :show-icon="item.showIcon || vTable.column.showIcon"
              :show-header-tip="item.showHeaderTip || vTable.column.showHeaderTip"
              :show-tip="item.showTip || vTable.column.showTip" :sort-by="item.sortBy || vTable.column.sortBy"
              :sortable="item.sortable || vTable.column.sortable" :tree-node="item.treeNode || vTable.column.treeNode"
              :show-overflow="item.showOverflow || vTable.column.showOverflow"
              :width="item.width || item.width || vTable.column.width"
              :editor="{ component: loadType(item.edit.type), attrs: item.edit.attrs }"
              :format-config="{ data: data.dictDs[item.key], label: 'label', value: 'value', async: true }"
              format-text="">
            </tiny-grid-column>
          </template>
          <template v-else>
            <!-- 不可编辑字典转码  -->
            <tiny-grid-column :field="item.key" :title="item.title" :align="item.align || vTable.column.align"
              :filter="item.filter || vTable.column.filter" :fixed="item.fixed || vTable.column.fixed"
              :footer-align="item.footerAlign || vTable.column.footerAlign"
              :footer-class-name="item.footerClassName || vTable.column.footerClassName"
              :header-align="item.headerAlign || vTable.column.headerAlign"
              :header-className="item.headerClassName || vTable.column.headerClassName"
              :min-width="item.minWidth || vTable.column.minWidth" :multi="item.multi || vTable.column.multi"
              :params="item.params || vTable.column.params" :required="item.required || vTable.column.required"
              :resizable="item.resizable || vTable.column.resizable" :rules="item.rules || vTable.column.rules"
              :show-header-overflow="item.showHeaderOverflow || vTable.column.showHeaderOverflow"
              :show-icon="item.showIcon || vTable.column.showIcon"
              :show-header-tip="item.showHeaderTip || vTable.column.showHeaderTip"
              :show-tip="item.showTip || vTable.column.showTip" :sort-by="item.sortBy || vTable.column.sortBy"
              :sortable="item.sortable || vTable.column.sortable" :tree-node="item.treeNode || vTable.column.treeNode"
              :show-overflow="item.showOverflow || vTable.column.showOverflow"
              :width="item.width || item.width || vTable.column.width"
              :format-config="{ data: data.dictDs[item.key], label: 'label', value: 'value', async: true }"
              format-text="enum"></tiny-grid-column>
          </template>
        </template>
        <template v-else>
          <!-- 普通列 -->
          <tiny-grid-column :field="item.key" :title="item.title" :align="item.align || vTable.column.align"
            :filter="item.filter || vTable.column.filter" :fixed="item.fixed || vTable.column.fixed"
            :footer-align="item.footerAlign || vTable.column.footerAlign"
            :footer-class-name="item.footerClassName || vTable.column.footerClassName"
            :header-align="item.headerAlign || vTable.column.headerAlign"
            :header-className="item.headerClassName || vTable.column.headerClassName"
            :min-width="item.minWidth || vTable.column.minWidth" :multi="item.multi || vTable.column.multi"
            :params="item.params || vTable.column.params" :required="item.required || vTable.column.required"
            :resizable="item.resizable || vTable.column.resizable" :rules="item.rules || vTable.column.rules"
            :show-header-overflow="item.showHeaderOverflow || vTable.column.showHeaderOverflow"
            :show-icon="item.showIcon || vTable.column.showIcon"
            :show-header-tip="item.showHeaderTip || vTable.column.showHeaderTip"
            :show-tip="item.showTip || vTable.column.showTip" :sort-by="item.sortBy || vTable.column.sortBy"
            :sortable="item.sortable || vTable.column.sortable" :tree-node="item.treeNode || vTable.column.treeNode"
            :show-overflow="item.showOverflow || vTable.column.showOverflow"
            :width="item.width || item.width || vTable.column.width"></tiny-grid-column>
        </template>
      </template>
      <template #empty>
        <span>暂无数据！</span>
      </template>
    </tiny-grid>

    <tiny-grid v-else  ref="voTable" @edit-actived="editActive" @edit-closed="editClosed" :data="tableData.data"
      :align="props.align" :row-key="props.rowKey" :drop-config="config.dropConfig" :edit-config="props.editConfig"
      :auto-resize="props.autoResize" :border="props.border" :column-min-width="props.columnMinWidth"
      :column-width="props.columnWidth" :columns="props.columns" :edit-rules="props.editRules"
      :expand-config="props.expandConfig" :fit="props.fit" :header-align="props.headerAlign"
      :header-cell-class-name="props.headerCellClassName" :header-row-class-name="props.headerRowClassName"
      :height="props.height" :highlight-cell="props.highlightCell"
      :highlight-current-column="props.highlightCurrentColumn" :highlight-current-row="props.highlightCurrentRow"
      :highlight-hover-column="props.highlightHoverColumn" :is-async-column="props.isAsyncColumn"
      :is-before-page-change="props.isBeforePageChange" :loading="props.loading"
      :loading-component="props.loadingComponent" :max-height="props.maxHeight" :min-height="props.minHeight"
      :mouse-config="props.mouseConfig" :optimization="props.optimization" :radio-config="props.radioConfig"
      :remote-filter="props.remoteFilter" :remote-sort="props.remoteSort" :resizable="props.resizable"
      :row-class-name="props.rowClassName" :row-group="props.rowGroup" :row-id="props.rowId" :row-span="props.rowSpan"
      :save-data="props.saveData" :select-config="props.selectConfig" :seq-serial="props.seqSerial"
      :show-footer="props.showFooter" :show-header="props.showHeader" :show-header-overflow="props.showHeaderOverflow"
      :show-overflow="props.showOverflow" :show-save-msg="props.showSaveMsg" :size="props.size"
      :sort-config="props.sortConfig" :sort-method="props.sortMethod" :sortable="props.sortable"
      :start-index="props.startIndex" :stripe="props.stripe" :sync-resize="props.syncResize" :toolbar="props.toolbar"
      :tooltip-config="props.tooltipConfig" :valid-config="props.validConfig">
      <template v-for="(item, num) in props.data.cols || props.cols">
        <template v-if="item.type">
          <!-- 内置列 序号 以及多选框 单选框 等 -->
          <tiny-grid-column :type="item.type" :width="item.width || '60'" :title="item.title"></tiny-grid-column>
        </template>
        <template v-else-if="item.slot">
          <!-- 插槽列 -->
          <tiny-grid-column :field="item.key || ''" show-overflow:tooltip :title="item.title" show-overflow
            :width="item.width || 'auto'" :align="item.align">
            <!-- 右侧操作  额外插槽 返回行数据-->
            <template #default="{ row }">
              <slot :name="item.slot" :row="row"></slot>
            </template>
          </tiny-grid-column>
        </template>
        <template v-else-if="item.edit">
          <template v-if="item.edit.editor">
            <!-- 可编辑异步渲染 -->
            <tiny-grid-column :field="item.key" :title="item.title" :align="item.align || vTable.column.align"
              :filter="item.filter || vTable.column.filter" :fixed="item.fixed || vTable.column.fixed"
              :footer-align="item.footerAlign || vTable.column.footerAlign"
              :footer-class-name="item.footerClassName || vTable.column.footerClassName"
              :header-align="item.headerAlign || vTable.column.headerAlign"
              :header-className="item.headerClassName || vTable.column.headerClassName"
              :min-width="item.minWidth || vTable.column.minWidth" :multi="item.multi || vTable.column.multi"
              :params="item.params || vTable.column.params" :required="item.required || vTable.column.required"
              :resizable="item.resizable || vTable.column.resizable" :rules="item.rules || vTable.column.rules"
              :show-header-overflow="item.showHeaderOverflow || vTable.column.showHeaderOverflow"
              :show-icon="item.showIcon || vTable.column.showIcon"
              :show-header-tip="item.showHeaderTip || vTable.column.showHeaderTip"
              :show-tip="item.showTip || vTable.column.showTip" :sort-by="item.sortBy || vTable.column.sortBy"
              :sortable="item.sortable || vTable.column.sortable" 
              :show-overflow="item.showOverflow || vTable.column.showOverflow"
              :width="item.width || item.width || vTable.column.width"
              :editor="{ component: loadType(item.edit.type), attrs: item.edit.attrs }"
              :format-config="{ data: data.dictDs[item.key], label: 'label', value: 'value', async: true }"
              format-text="">
            </tiny-grid-column>
          </template>
          <template v-else>
            <!-- 不可编辑字典转码  -->
            <tiny-grid-column :field="item.key" :title="item.title" :align="item.align || vTable.column.align"
              :filter="item.filter || vTable.column.filter" :fixed="item.fixed || vTable.column.fixed"
              :footer-align="item.footerAlign || vTable.column.footerAlign"
              :footer-class-name="item.footerClassName || vTable.column.footerClassName"
              :header-align="item.headerAlign || vTable.column.headerAlign"
              :header-className="item.headerClassName || vTable.column.headerClassName"
              :min-width="item.minWidth || vTable.column.minWidth" :multi="item.multi || vTable.column.multi"
              :params="item.params || vTable.column.params" :required="item.required || vTable.column.required"
              :resizable="item.resizable || vTable.column.resizable" :rules="item.rules || vTable.column.rules"
              :show-header-overflow="item.showHeaderOverflow || vTable.column.showHeaderOverflow"
              :show-icon="item.showIcon || vTable.column.showIcon"
              :show-header-tip="item.showHeaderTip || vTable.column.showHeaderTip"
              :show-tip="item.showTip || vTable.column.showTip" :sort-by="item.sortBy || vTable.column.sortBy"
              :sortable="item.sortable || vTable.column.sortable" 
              :show-overflow="item.showOverflow || vTable.column.showOverflow"
              :width="item.width || item.width || vTable.column.width"
              :format-config="{ data: data.dictDs[item.key], label: 'label', value: 'value', async: true }"
              format-text="enum"></tiny-grid-column>
          </template>
        </template>
        <template v-else>
          <!-- 普通列 -->
          <tiny-grid-column :field="item.key" :title="item.title" :align="item.align || vTable.column.align"
            :filter="item.filter || vTable.column.filter" :fixed="item.fixed || vTable.column.fixed"
            :footer-align="item.footerAlign || vTable.column.footerAlign"
            :footer-class-name="item.footerClassName || vTable.column.footerClassName"
            :header-align="item.headerAlign || vTable.column.headerAlign"
            :header-className="item.headerClassName || vTable.column.headerClassName"
            :min-width="item.minWidth || vTable.column.minWidth" :multi="item.multi || vTable.column.multi"
            :params="item.params || vTable.column.params" :required="item.required || vTable.column.required"
            :resizable="item.resizable || vTable.column.resizable" :rules="item.rules || vTable.column.rules"
            :show-header-overflow="item.showHeaderOverflow || vTable.column.showHeaderOverflow"
            :show-icon="item.showIcon || vTable.column.showIcon"
            :show-header-tip="item.showHeaderTip || vTable.column.showHeaderTip"
            :show-tip="item.showTip || vTable.column.showTip" :sort-by="item.sortBy || vTable.column.sortBy"
            :sortable="item.sortable || vTable.column.sortable" 
            :show-overflow="item.showOverflow || vTable.column.showOverflow"
            :width="item.width || item.width || vTable.column.width"></tiny-grid-column>
        </template>
      </template>
      <template #empty>
        <span>暂无数据！</span>
      </template>
    </tiny-grid>
 
    <tiny-pager v-if="props.isPage" :align="props.page.align" :current-page="data.custPager.currentPage" :mode="props.mode"
      :page-size="data.custPager.pageSize" :total="data.custPager.total" :page-sizes="props.page.pageSizes"
      @current-change="currentChange" @size-change="sizeChange" :layout="props.layout">
    </tiny-pager>

  </div>
</template>

<script setup lang="jsx">
import { ref, toRef, reactive, onBeforeMount, onMounted, computed, getCurrentInstance } from 'vue';
import { TinyGrid, TinyGridColumn, TinyGridToolbar, TinyPager } from '@opentiny/vue'
import { iconYes, iconEdit, iconSearch, iconRightO, iconDeltaDownO} from '@opentiny/vue-icon';
import VoIcon from '@/components/com/VoIcon.vue'; // 导入 VoIcon 组件
import Sortable from 'sortablejs';
const TinyIconYes = iconYes();
const TinyIconEdit = iconEdit();
const TinyIconSearch = iconSearch();
import vTable from '@/pub/vo-table';
const voTable = ref(null);



let { proxy } = getCurrentInstance();
const data = reactive({
  //表格数据
  isForm: true, //是否是表单
  dictDs: {},
  tableData: [],
  data: {},
  custPager: {
    currentPage: 1,
    pageSize: 10,
    total: 0
  }
});

const props = defineProps({
  isTree: { Boolean, default: vTable.grid.isTree },
  data: { data: [], cols: [] },//基础数据集
  cols: [],
  dropConfig: { row: false, column: false } || vTable.dropConfig,// 表格拖拽配置项  
  autoResize: { Boolean, default: vTable.grid.autoResize },//父元素响应式监听
  border: { Boolean, default: vTable.grid.border },//是否带有纵向边框
  columnMinWidth: { String, default: vTable.grid.columnMinWidth },//number | string 	设置可以调整到的最小宽度
  contextMenu: { String, default: vTable.grid.contextMenu },//快捷菜单配置项
  editConfig: { Object, default: vTable.grid.editConfig },//表格编辑配置项
  editRules: { Object, default: vTable.grid.editConfig },
  expandConfig: { Object, default: vTable.grid.expandConfig },
  fit: { Boolean, default: vTable.grid.fit },//所有列的宽度是否自撑开
  headerAlign: { String, default: vTable.grid.headerAlign }, //所有的表头列的对齐方式;该属性的可选值为 left（左对齐）, center（居中对齐）, right（右对齐）
  headerCellClassName: { String, default: vTable.grid.headerCellClassName }, //	给表头的单元格附加 className，也可以是函数
  headerRowClassName: { String, default: vTable.grid.headerRowClassName }, //表头的行附加 className，也可以是函数
  height: { String, default: vTable.grid.height }, //设置表格内容区域（不含表格头部，底部）的高度。 不设置时，表格内容区域的高度度自适应；表格的高度；支持铺满父容器或者固定宽高;该属性的可选值为 整数, px，%
  highlightCell: { Boolean, default: vTable.grid.highlightCell }, //只对 editConfig 配置时有效，是否在编辑时高亮单元格边框
  highlightCurrentColumn: { Boolean, default: vTable.grid.highlightCurrentColumn }, //	是否要高亮当前列
  highlightCurrentRow: { Boolean, default: vTable.grid.highlightCurrentRow }, //是否要高亮当前行
  highlightHoverColumn: { Boolean, default: vTable.grid.highlightHoverColumn }, //鼠标移到行是否要高亮显示
  isAsyncColumn: { Boolean, default: vTable.grid.isAsyncColumn }, //设置表格的列是否延迟加载;是否开启异步列功能，配合 scrollLoad 一起使用
  isBeforePageChange: { Boolean, default: vTable.grid.isBeforePageChange }, //	是否打开页面改变时的前置处理特性。在值为true时，翻页操作或者改变页大小操作不会立即生效，留给用户处理业务逻辑，之后通过调用预留的callback或者rollback使之生效或者失效
  loading: { Boolean, default: vTable.grid.loading }, //表格是否显示加载中
  loadingComponent: { String, default: vTable.grid.headerAlign }, //自定义表格loading
  maxHeight: { String, default: vTable.grid.maxHeight }, //设置表格内容区域（不含表格头部，底部）的最大高度。;该属性的可选值为 整数, px，%
  minHeight: { String, default: vTable.grid.minHeight }, //	设置表格内容区域（不含表格头部，底部）的最小高度。
  mouseConfig: { String, default: vTable.grid.mouseConfig }, //	鼠标配置项
  optimization: { String, default: vTable.grid.optimization }, //表格虚拟滚动的优化配置项
  pager: { Object, default: vTable.grid.pager }, //	分页配置项
  radioConfig: { Object, default: vTable.grid.radioConfig }, //单选框配置项
  remoteFilter: { Boolean, default: vTable.grid.remoteFilter }, //所有列是否使用服务端筛选，如果设置为 true 则不会对数据进行处理
  remoteSort: { Boolean, default: vTable.grid.remoteSort }, //是否将服务端的全部数据进行排序。默认为 false 不进行服务端排序。
  resizable: { Boolean, default: vTable.grid.resizable }, //	设置是否允许调整列宽
  rowClassName: { String, default: vTable.grid.rowClassName }, //自定义表格行类名，用于自定义表格的行样式的场景。可以直接设置字符串类名，也可以是用函数
  rowGroup: { String, default: vTable.grid.rowGroup }, //row-group 属性可以配置行分组，行分组会将具有相同值的列进行分组展示。
  rowId: { String, default: vTable.grid.rowId }, //自定义行数据唯一主键的字段名（行数据必须要有唯一主键，默认自动生成）
  rowSpan: {}, //	设置行合并,该属性仅适用于普通表格，不可与 tree-config 同时使用
  saveData: { String, default: vTable.grid.saveData }, //	服务端数据保存方法
  selectConfig: { Object, default: vTable.grid.selectConfig }, //	复选框配置项
  seqSerial: { Boolean, default: vTable.grid.seqSerial }, //设置行序号是否连续，开启分页时有效,seqSerial 当 showSeq 为 true 时有效。
  showFooter: { Boolean, default: vTable.grid.showFooter }, //是否显示表尾合计
  showHeader: { Boolean, default: vTable.grid.showHeader }, //	是否显示表头
  showHeaderOverflow: { Boolean, default: vTable.grid.showHeaderOverflow }, //	设置表头所有内容过长时显示为省略号;该属性的可选值为 ellipsis（只显示省略号）,title（并且显示为原生 title）,tooltip（并且显示为 tooltip 提示）
  showOverflow: { String, default: vTable.grid.showOverflow }, //设置所有内容过长时显示为省略号（如果是固定列建议设置该值，提升渲染速度）;该属性的可选值为 ellipsis（只显示省略号）,title（并且显示为原生 title）,tooltip（并且显示为 tooltip 提示）
  showSaveMsg: { Boolean, default: vTable.grid.showSaveMsg }, //切换分页时有未保存的数据时是否进行提示
  size: { String, default: vTable.grid.size }, //表格的尺寸;该属性的可选值为 medium, small, mini
  sortConfig: { String, default: vTable.grid.sortConfig }, //排序配置项
  sortMethod: { String, default: vTable.grid.sortMethod }, //	自定义所有列的排序方法，当触发排序时会调用该函数返回排序后的结果;自定义排序方法，类似原生的sort排序
  sortable: { Boolean, default: vTable.grid.sortable }, //设置是否允许列数据排序。默认为 true 可排序
  startIndex: 0, //只对 type=index 的列有效，动态索引的起始值
  stripe: { Boolean, default: vTable.grid.stripe }, //是否带有斑马纹
  syncResize: { Boolean, default: vTable.grid.syncResize }, //响应式跟随某个属性（对于通过某个属性来控制显示/隐藏切换的场景可能会用到）
  toolbar: { Object, default: vTable.grid.toolbar }, //响应式跟随某个属性（对于通过某个属性来控制显示/隐藏切换的场景可能会用到）
  treeConfig: { Object, default: vTable.grid.treeConfig }, //树形结构配置项
  tooltipConfig: { Object, default: vTable.grid.tooltipConfig }, //Grid 内置 tooltip 配置项，请参考 Tooltip 组件属性说明
  validConfig: { Object, default: vTable.grid.validConfig }, //校验配置项
  toolBar: { Object, default: { right: true, } },//工具栏是否显示
  isPage: { Boolean, default: vTable.page.isPage },//是否分页
  page: { Object, default: vTable.page },//分页信息
  serverPage: { Boolean, default: vTable.page.serverPage },//是否服务端分页
  mode:{String, default: vTable.page.mode}
});

const getDictStores = (key, dictCode) => {
  proxy.$api.data.getSysDictByCode(dictCode).then(res => {
    data.dictDs[key] = res;
  });
};

//初始化字典数据
onBeforeMount(() => {
  //加载下拉字典数据
  var cols = props.cols || props.data.cols;
  for (var i = 0; i < cols.length; i++) {
    var item = cols[i];
    if (item.edit) {
      getDictStores(item.key, item.dictCode);
    }
  }
})

const loadType = (type) => {
  return type;
}

data.data = toRef(props, 'data');
const tableData = computed(() => {
  if (Array.isArray(data.data)) {
    tableData.data = data.data
    if (props.isPage) {
      tableData.data = data.data.slice((data.custPager.currentPage - 1) * data.custPager.pageSize,
        data.custPager.currentPage * data.custPager.pageSize)
      data.custPager.pageSize = data.custPager.pageSize;
      data.custPager.total = data.data.length;
    }
    return tableData;
  } else {
    tableData.data = data.data.content
    let pager = data.data.page || {};
    if (props.isPage) {
      data.custPager.pageSize = pager.size || props.page.pageSize;
      data.custPager.total = pager.totalElements || 0;
    }
    return tableData;
  }
});

const currentChange = (value) => {
  data.custPager.currentPage = value
  //使用前端分页不再请求父页面
  if (props.serverPage) {
    emits('fetchData')
  } else {
    //前端分页
    tableData.data = data.data.slice((data.custPager.currentPage - 1) * data.custPager.pagesize,
      data.custPager.currentPage * data.custPager.pagesize)
  }
}

//渲染树状箭头自定义图标
const renderIcon = (h, { active }) => {
  if(active)
   return h(VoIcon, { iconName: 'down',color:'' });
  else{
   return h(VoIcon, { iconName: 'right',color:'' });
  }

};

const sizeChange = (value) => {
  data.custPager.pageSize = value
  //使用前端分页不再请求父页面
  if (props.serverPage) {
    emits('fetchData')
  } else {
    //前端分页
    tableData.data = data.data.slice((data.custPager.currentPage - 1) * data.custPager.pagesize,
      data.custPager.currentPage * data.custPager.pagesize)

  }
}

const emits = defineEmits(['fetchData']);

//拖拽配置
const config = reactive({
  dropConfig: {
    plugin: Sortable,
    row: false,//行拖拽
    column: true,//列拖拽
  }
});

//返回grid
function grid() {
  return voTable.value;
}
const page = () => {
  return data.custPager;
}
defineExpose({
  grid,
  page

});
</script>
<style lang="scss" scoped>
.toolBar {
  display: flex;
  flex-direction: row;
  width: 100%;
  justify-content: space-between;

  :deep(.tiny-button) {
    height: 100%;
  }
  .leftBar {
    display: flex;
    justify-content: flex-start;
  }

  .rightBar {
    justify-content: flex-end;

  }
}
</style>
